<template>
  <section class="component case-record-chart">
    <common-title :title="isReturnCase ?'流出案件' :'待催案件'">
      <el-select slot="append" v-model="type" placeholder="请选择" @change="updateData">
        <el-option value="按金额统计">按金额统计</el-option>
        <el-option value="按数量统计">按数量统计</el-option>
      </el-select>
    </common-title>

    <ve-pie height="450px" legend-position="bottom" :data="caseRecordChart.data" :settings="caseRecordChart.setting" :legend="caseRecordChart.legend"></ve-pie>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from 'vue-property-decorator'
import { Layout, Dependencies } from "~/core/decorator";
import { VePie } from "v-charts";
import { HomePageService } from '~/services/domain-service/home-page.service';

@Component({
  components: {
    VePie
  }
})
export default class CaseRecordChart extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService
  @Prop() private isReturnCase

  private type: any = '按金额统计'

  private caseRecordChart: any = {
    data: {
      columns: ['部门', '催收总金额'],
      rows: []
    },
    setting: {
      label: {
        position: 'outside',
        formatter: '{b}: {d}%'
      },
      radius: 130
    },
    legend: {
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      x: 'center',
      bottom: 20
    }
  };

  private updateData() {
    this.caseRecordChart.data.columns = this.type === '按金额统计' ? ['部门', '催收总金额'] : ['部门', '案件个数']
    this.isReturnCase ? this.getReturnCase() : this.getWaitCase()

  }

  private getReturnCase() {
    this.homePageService.getOutCaseChart().subscribe(
      data => {
        this.caseRecordChart.data.rows = data
      }
    )
  }

  private getWaitCase() {
    this.homePageService.getWaitCollectCaseChart().subscribe(
      data => {
        this.caseRecordChart.data.rows = data
      }
    )
  }

  private mounted() {
    this.updateData()
  }
}
</script>

<style lang="less" scoped>
</style>
